<template>
<div>
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar left-arrow title="搜索中心" @click-left="$router.back()"></van-nav-bar>
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="hSearch"
      >
      <div slot="action" @click="hClickSearchInput">搜索</div>
    </van-search>

    <!-- 联想建议和历史记录只出现一个 -->
    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell v-for="(item,index) in csearchSuggestions"  :key="index" icon="search" >
        <div slot="title" v-html="item" @click="hClickSearchSuggestion(index)"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录">
      </van-cell>
      <van-cell
      v-for="(item,index) in searchHistories"
      :title="item"
      :key="index"
      @click="hClickHistory(item)">
        <van-icon name="close" @click.stop="hRemoveHistory(index)"/>
      </van-cell>

    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { getItem, setItem } from '@/utils/storage'
import { getSearchSuggestions } from '@/api/search'
export default {
  name: 'Search',
  data () {
    return {
      timer: null, // 定时器
      keyword: '', // 搜索关键字
      searchSuggestions: [], // 检索建议
      searchHistories: getItem('searchHistories') || [] // 历史记录
    }
  },
  computed: {
    // 对searchSuggestions中的数据做关键字高亮
    csearchSuggestions () {
      return this.searchSuggestions.map(str => {
        // new RegExp()这样定义正则，第一个参数可以写成变量
        const reg = new RegExp(this.keyword, 'gi')
        // 如果正则匹配到字符串中的内容后，就会执行函数
        // 函数的参数是匹配到的内容，返回值是要替换的内容
        const str1 = str.replace(reg, function (obj) {
          return `<span style="color:red">${obj}</span>`
        })
        return str1
      })
    }
  },
  methods: {
    // 点击历史记录中的某一个
    hClickHistory (item) {
      // 修改搜索历史之后，watch不是立即执行的，watch是一个异步事件
      this.addSearchHistory(item)
      // 路由跳转
      setTimeout(() => {
        this.$router.push({
          name: 'searchResult',
          query: {
            keyword: item
          }
        })
      }, 100)
    },
    // 点击联想建议
    hClickSearchSuggestion (index) {
      const str = this.searchSuggestions[index]
      // 调用函数 添加历史记录

      this.addSearchHistory(str)
      // 路由跳转
      setTimeout(() => {
        this.$router.push({
          name: 'searchResult',
          query: {
            keyword: str
          }
        })
      }, 100)
    },
    // 点击搜索
    hClickSearchInput () {
      // 调用函数 添加历史记录
      if (this.keyword) {
        this.addSearchHistory(this.keyword)
      }
      // 路由跳转
      setTimeout(() => {
        this.$router.push({
          name: 'searchResult',
          query: {
            keyword: this.keyword
          }
        })
      }, 100)
    },
    // 封装一个函数，用来把关键词添加到历史记录
    addSearchHistory (str) {
      // 1 保证没有重复项 在搜索记录中找有没有这个关键词
      const index = this.searchHistories.indexOf(str)
      if (index !== -1) {
        // 已经存在一样的搜索记录
        this.searchHistories.splice(index, 1)
      }
      // 搜索的没有存在，添加到最前面
      this.searchHistories.unshift(str)
    },
    // 删除指定位置的历史记录
    hRemoveHistory (index) {
      this.searchHistories.splice(index, 1)
    },
    // async hSearch () {
    //   if (!this.keyword) {
    //     return
    //   }
    //   // 调用接口，拿到检索建议
    //   const result = await getSearchSuggestions(this.keyword)
    //   // console.log(result)
    //   // 关键字要高亮显示，创建计算属性，在计算属性中做高亮
    //   this.searchSuggestions = result.data.data.options
    // }

    // 防抖 - 可能就执行两次（第一次调动、最后一次调用）
    // hSearch () {
    //   if (this.timer) {
    //     clearTimeout(this.timer)
    //   }
    //   this.timer = setTimeout(async () => {
    //     if (!this.keyword) {
    //       return
    //     }
    //     // 调用接口，拿到检索建议
    //     const result = await getSearchSuggestions(this.keyword)
    //     // 关键字要高亮显示，创建计算属性，在计算属性中做高亮
    //     this.searchSuggestions = result.data.data.options
    //   }, 0.3 * 1000)
    // }

    // 节流 - 降低执行频率 执行多次
    hSearch () {
      if (!this.timer) {
        this.timer = setTimeout(async () => {
          this.timer = null
          if (!this.keyword) {
            return
          }
          // 调用接口，拿到检索建议
          const result = await getSearchSuggestions(this.keyword)
          // 关键字要高亮显示，创建计算属性，在计算属性中做高亮
          this.searchSuggestions = result.data.data.options
        }, 0.3 * 1000)
      }
    }

  },
  watch: {
    searchHistories (newVal, oldVal) {
      setItem('searchHistories', newVal)
    }
  }
}
</script>

<style lang="" scoped>

</style>
